﻿#deviceMonitor {
  color: #fff;
  background-color: #00065b;
  background-size: 100% 100%;
  background-position: 0 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;

  .deviceMonitorBackC{
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
  }

  .selectItem{
    border:1px dashed #fff;
  }
  .selectItem0{border:1px dashed red;}
  .selectItem1{border:1px dashed #06FCED;}
  .selectItem2{border:1px dashed #F5F30B;}
  .selectItem3{border:1px dashed #29C0FF;}
  .selectItem4{border:1px dashed #25E4C3;}
  .selectItem5{border:1px dashed #ACDAC9;}
  .selectItem6{border:1px dashed #00BFFF;}
  .selectItem7{border:1px dashed #7EB37E;}
  .selectItem8{border:1px dashed #FF6C00;}
  .selectItem9{border:1px dashed #F6E48E;}
  .selectItem10{border:1px dashed #050202;}

  .contextmenu {
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
    li {
      margin: 0;
      padding: 7px 1px 7px 16px;
      cursor: pointer;
      &:hover {
        background: #eee;
      }
    }
    li.displayLi,  li.displayLi>ul>li , li.displayLi>ul>li>ul>li {
      pointer-events: none;
      color: #C0C4CC;
      cursor: not-allowed;
      background-image: none;
      background-color: #FFFFFF;
      border-color: #e6ebf5;
    }
    .divider-li {
      padding: 0;
      .el-divider--horizontal {
        margin: 2px;
      }
    }
    .rightMenu:hover>ul.childrenMenuUl{
      display: block;
    }
    .childrenMenuUl{
      display: none;
      position: absolute;
      margin: 0;
      background: #fff;
      z-index: 3000;
      list-style-type: none;
      padding: 5px 0;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 400;
      color: #333;
      -webkit-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
      width: 150px;
      left: 110px;
    }
    .rightMenu{
      //二 设备操作
      .deviceOpeUl{
        top: 8%;
      }
      //二 设备列表
      .deviceList{
        top: 18%;
        width: 300px;
        max-height: 200px;
        min-height: 50px;
        overflow-y:auto;
      }
      //二 对齐方式  样式
      .alignmentUl{
        top: 26%;
      }
      //二 批量样式
      .batchOpeUl{
        top: 35%;
      }
      // 二测试菜单
      .regionListUl{
        top: 45%;
        max-height: 200px;
        min-height: 50px;
        overflow-y:auto;
        .showDivider{
          border-bottom:1px solid #DCDFE6
        }

      }
    }

  }
}

//
///*当div的背景图变灰*/
//.pattern{
//    -webkit-filter: grayscale(100%);
//    -moz-filter: grayscale(100%);
//    -ms-filter: grayscale(100%);
//    -o-filter: grayscale(100%);
//    filter: grayscale(100%);
//    filter:gray;
//}
//
//.ctrl_bg {
//    background-size: cover;
//    background-size: auto 100%;
//    border: 0px solid red;
//    position: relative;
//    margin: 0 auto;
//    height: 100%;
//}
.active-device-line-1{
  border: 2px solid #d04545;
}


.conduit_w {
  background: url("~@/assets/image/device/shuiguan_w.svg");
  background-size: 100% 100%;
  box-sizing: border-box;
}

.conduit_h {
  background: url("~@/assets/image/device/shuiguan_h.svg");
  background-size: 100% 100%;
  box-sizing: border-box;
}

.adapter_2 {
  background: url("~@/assets/image/device/pipe2.svg");
  background-size: 100% 100%;
  box-sizing: border-box;
}

.adapter_3 {
  background: url("~@/assets/image/device/pipe3.svg");
  background-size: cover;
  box-sizing: border-box;
}

.adapter_4 {
  background: url("~@/assets/image/device/pipe4.svg");
  background-size: 100% 100%;
  box-sizing: border-box;
}

.redlineh {
  background: url("~@/assets/image/device/line_red_h.svg");
  background-size: 100% 100%;
  box-sizing: border-box;
}

.redlines {
  background: url("~@/assets/image/device/line_red_s.svg");
  background-size: 100% 100%;
  box-sizing: border-box;
}

.rotate360 {
  transform: rotate(360deg);
  -ms-transform: rotate(360deg); /* IE 9 */
  -moz-transform: rotate(360deg); /* Firefox */
  -webkit-transform: rotate(360deg); /* Safari 和 Chrome */
  -o-transform: rotate(360deg); /* Opera */
}

.rotate270 {
  transform: rotate(270deg);
  -ms-transform: rotate(270deg); /* IE 9 */
  -moz-transform: rotate(270deg); /* Firefox */
  -webkit-transform: rotate(270deg); /* Safari 和 Chrome */
  -o-transform: rotate(270deg); /* Opera */
}

.rotate180 {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* IE 9 */
  -moz-transform: rotate(180deg); /* Firefox */
  -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
  -o-transform: rotate(180deg); /* Opera */
}

.rotate90 {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
  -o-transform: rotate(90deg); /* Opera */
}

.animation {
  border: 0.5px solid #606266;
  border-radius: 100%;
  -webkit-animation: twinkling 1.1s infinite ease-in-out;
  animation: twinkling 1.1s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes twinkling {
  0% {
    opacity: 1;
    filter: alpha(opacity=1);
    -webkit-transform: scale(1);
  }

  50% {
    opacity: 1;
    filter: alpha(opacity=1);
    -webkit-transform: scale(1);
  }

  100% {
    opacity: 1;
    filter: alpha(opacity=1);
    -webkit-transform: scale(1);
  }
}

.box{
  width: 100%;
  height: 100%;
  border: 1px #056768 solid;
  border-radius: 10px;
  .left,.y-resize,.right{
    float: left;
    overflow: hidden;
  }
  .left{
    width: calc(20% - 10px);
    height: 100%;
    background: #A0CFFF;
    border-radius: 10px 0 0 10px;
  }
  .y-resize{
    width: 10px;
    height: 100%;
    background: #C0C4CC;
    cursor: w-resize;
  }
  .right{
    width: 80%;
    height: 100%;
    .top,.bottom{
      overflow: hidden;
    }
    .top{
      height: calc(20% - 0.6vh);
      background:  #C6E2FF;
      border-radius: 0 10px 0 0;
    }
    .x-resize{
      height: 0.6vh;
      background: #C0C4CC;
      cursor: s-resize;
      position: relative;
    }
    .bottom{
      height: 80%;
      background: #ECF5FF;
      border-radius: 0 0 10px 0;
    }
  }




}



